<!DOCTYPE html>
<html>
<body>
<canvas id="physics-graph" width="450" height="300"></canvas>
<script>
    const canvas = document.getElementById('physics-graph');
    const ctx = canvas.getContext('2d');

    // Drawing parameters
    const ox = 70;
    const oy = 150;
    const scaleX = 25; // pixels per second
    const scaleY = 250; // pixels per meter

    // Style for axes and labels
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Helper function to draw arrows
    function drawArrow(ctx, fromx, fromy, tox, toy) {
        const headlen = 10;
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    }

    // Draw Axes
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    // Y-axis
    ctx.moveTo(ox, 290);
    ctx.lineTo(ox, 10);
    drawArrow(ctx, ox, 290, ox, 10);
    ctx.stroke();
    // X-axis
    ctx.beginPath();
    ctx.moveTo(20, oy);
    ctx.lineTo(440, oy);
    drawArrow(ctx, 20, oy, 440, oy);
    ctx.stroke();

    // Axis Labels (italic)
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('y/m', ox - 30, 20);
    ctx.fillText('t/s', 430, oy + 25);

    // Ticks and Number Labels (non-italic)
    ctx.font = '18px Times New Roman';

    // Origin Label
    ctx.textAlign = 'right';
    ctx.textBaseline = 'top';
    ctx.fillText('0', ox - 5, oy + 5);

    // Y-axis Ticks and Labels
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    
    // Label for 0.40
    let y_val_1 = 0.40;
    let py1 = oy - y_val_1 * scaleY;
    ctx.fillText('0.40', ox - 15, py1);
    // Draw tick for 0.40.
    ctx.beginPath();
    ctx.moveTo(ox, py1);
    ctx.lineTo(ox - 8, py1);
    ctx.stroke();

    // Label for 0.20
    let y_val_2 = 0.20;
    let py2 = oy - y_val_2 * scaleY;
    ctx.fillText('0.20', ox - 15, py2);

    // X-axis Tick and Label
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    let t_val = 5.0;
    let px = ox + t_val * scaleX;
    ctx.fillText('5.0', px, oy + 8);
    // Draw tick for 5.0
    ctx.beginPath();
    ctx.moveTo(px, oy);
    ctx.lineTo(px, oy + 5);
    ctx.stroke();

    // Draw the sine wave
    ctx.beginPath();
    ctx.lineWidth = 2; // Thicker line for the curve
    
    // The equation derived from the graph is y(t) = A*sin(ωt + φ)
    // A = 0.40 m
    // At t=0, y=0.20 => 0.20 = 0.40*sin(φ) => sin(φ)=0.5. Since velocity is positive, φ = π/6.
    // At t=5.0, y=0. From graph, this is the first zero-crossing after the peak.
    // The phase at this point is π. So, ω*5.0 + π/6 = π => 5ω = 5π/6 => ω = π/6 rad/s.
    const A = 0.40;
    const omega = Math.PI / 6;
    const phi = Math.PI / 6;
    
    const t_start = 0;
    const t_end = 13.5;
    const steps = 200;

    for (let i = 0; i <= steps; i++) {
        let t = t_start + (t_end - t_start) * i / steps;
        let y = A * Math.sin(omega * t + phi);
        let canvasX = ox + t * scaleX;
        let canvasY = oy - y * scaleY;

        if (i === 0) {
            ctx.moveTo(canvasX, canvasY);
        } else {
            ctx.lineTo(canvasX, canvasY);
        }
    }
    ctx.stroke();

</script>
</body>
</html>